<template>
  <div class="works-list-component">
    <el-skeleton v-if="loading" :rows="5" animated />
    <el-row v-else :gutter="16">
      <el-col v-for="item in list" :key="item.id" :span="6" class="poster-item">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="card-cover">
            <img v-if="item.coverImg" :src="item.coverImg" />
            <img v-else :src="defaultBg" />
            <div class="hover-item">
              <router-link :to="`/editor/${item.id}`">
                <el-button size="large" type="primary">继续编辑该作品</el-button>
              </router-link>
            </div>
          </div>
          <div class="card-meta">
            <div class="card-meta-title">{{ item.title }}</div>
            <div class="card-actions">
              <router-link :to="`/editor/${item.id}`">
                <el-icon><EditPen /></el-icon>
              </router-link>
              <el-dropdown>
                <el-icon><More /></el-icon>
                <template #dropdown>
                  <el-dropdown-menu class="overlay-dropdown">
                    <el-dropdown-item :icon="CopyDocument" @click="copyClicked(item.id)">复制</el-dropdown-item>
                    <el-dropdown-item :icon="Delete" @click="deleteClicked(item.id)">删除</el-dropdown-item>
                    <el-dropdown-item v-if="item.coverImg" :icon="Download" @click="download(item.coverImg)">
                      下载图片
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-card>
        <div class="tag-list">
          <el-tag v-if="item.status === 1" type="danger">未发布</el-tag>
          <el-tag v-if="item.status === 2" type="success">已发布</el-tag>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import defaultBg from '@/assets/default-template-bg.png'
import { TemplateData } from '@/service/request'
import { ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import { More, CopyDocument, Delete, Download, EditPen } from '@element-plus/icons-vue'
import { downloadImage } from '@/utils/utils'

withDefaults(defineProps<{ list: TemplateData[]; loading?: boolean; transferStatus?: boolean }>(), {
  loading: false,
  transferStatus: false
})

const emit = defineEmits(['onCopy', 'onDelete'])

const deleteClicked = (id: number) => {
  ElMessageBox.confirm('确定要删除该作品吗？', '提示', {
    type: 'warning',
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    callback: async (action: Action) => {
      if (action === 'confirm') {
        emit('onDelete', id)
      }
    }
  })
}
const copyClicked = (id: number) => {
  emit('onCopy', id)
}

const download = (url: string) => {
  downloadImage(url)
}
</script>
<style lang="scss" scoped>
.works-list-component {
  width: 100%;
  height: 100%;
}
.poster-item {
  position: relative;
  margin-bottom: 20px;

  .el-card {
    border-radius: 12px;
  }

  .card-cover {
    height: 390px;
    position: relative;
    overflow: hidden;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    .hover-item {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: none;
      background: rgba(0, 0, 0, 0.8);
      align-items: center;
      justify-content: center;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
    }
  }
  &:hover .hover-item {
    display: flex;
  }

  &:hover img {
    transform: scale(1.25);
  }
  .card-cover > img {
    width: 100%;
    height: 100%;
  }

  .card-cover img {
    transition: all ease-in 0.2s;
  }

  .is-hover-shadow {
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
  }

  .card-meta {
    margin: 0;
    .card-meta-title {
      color: #333;
      padding: 10px 12px;
      border-bottom: 1px solid #f2f2f2;
      font-weight: 500;
      margin-bottom: 0 !important;
    }

    .card-actions {
      display: flex;
      justify-content: space-between;
      padding: 13px 26px;
    }
    .menu-item {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .tag-list {
    position: absolute;
    top: -4px;
    left: 6px;
  }
}
</style>
